<template>
  <div>
    <div class="shop-car van-hairline--top">
      <div class="flex align-center justify-between">
        <div class="flex align-center">
          <div class="car-num padding-right-sm">
            <!--          <van-icon size="1rem" name="cart" />-->
            <van-icon size=".8rem" :class="{'text-blue':totalCount>0}" name="shopping-cart"/>
            <span v-if="totalCount" class="num"><van-tag round type="danger">{{ totalCount }}</van-tag></span>
            <!--          <van-icon name="cart-circle" />-->
          </div>
          <div>
            <!--<div class="text-f14">价格： <span class="total-price">￥{{ totalPrice }}</span></div>-->
            <div class="text-f14" v-if="totalCount<1">未选购商品</div>
            <div class="text-999">另需配送费 ￥5</div>
          </div>
        </div>
        <div class="price">
          <van-button v-if="totalCount" block round type="info">共计 ￥{{ totalPrice }}</van-button>
          <van-button v-else class="disabled" block round type="info">￥15元起购</van-button>
        </div>
      </div>
    </div>

    <!-- 加入购入车按钮的小球动画实现 -->
    <div class="ball-container">
      <transition v-on:after-enter="afterEnter" v-on:enter="enter" v-on:before-enter="beforeEnter" name="drop"
                  v-for="(litterBall,indexBall) in balls" :key="indexBall">
        <div v-show="litterBall.show" class="ball">
          <div class="inner-hook" :class="indexBall">1</div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script type="es6">
export default {
  inject: ['reload'], /**reload(callback);对应provide中的数组值*/
  name: "ShopCar",
  props: {
    selectFoods: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    totalPrice() {
      let total = 0;
      this.selectFoods.forEach((food) => {
        total += (food.price * food.count);
      });
      return total;
    },
    totalCount() {
      let count = 0;
      this.selectFoods.forEach((food) => {
        count += food.count;
      });
      return count;
    },
  },
  data() {
    return {
      balls: [{show: false}, {show: false}, {show: false}, {show: false}, {show: false}],
      dropBall: [], // 用dropBalls来存放掉落的小球
      goods: "",
      counts: 1
    }
  },
  mounted() {

  },
  methods: {
    drop(el) {
      for (var i = 0; i < this.balls.length; i++) {
        if (!this.balls[i].show) {//把小球show为false的变成true，展示出来
          let ball = this.balls[i];
          ball.show = true;  //这里这样写他继承的this.balls的值也会变成true
          ball.el = el; //把这个球的位置保留下来
          this.dropBall.push(ball);  //把这个已经drop的球放到dropBall中
          //console.log(this.dropBall,222)
          return  //结束循环和函数，不会让循环再往后执行了
        }
      }
    },
    goodsCalculate(goods) {

    },

    // js动画钩子
    beforeEnter: function (el) {
      let count = this.balls.length || 1;
      while (count--) {
        let ball = this.balls[count]
        if (ball.show) {
          let rect = ball.el.getBoundingClientRect() // getBoundingClientRect()获取小球相对于视窗的位置，屏幕左上角坐标为0，0
          let x = rect.left - 32 // 小球x方向位移= 小球距离屏幕左侧的距离-外层盒子距离水平的距离
          let y = -(window.innerHeight - rect.top - 22) // 负数，因为是从左上角向下
          el.style.display = '';
          el.style.webkitTransform = `translate3d(0,${y}px,0)` // 设置外层盒子，即小球垂直方向的位移
          el.style.transform = `translate3d(0,${y}px,0)`
          let inner = el.getElementsByClassName('inner-hook')[0]
          inner.style.webkitTransform = `translate3d(${x}px,0,0)` // 设置内层盒子，即小球水平方向的距离
          inner.style.transform = `translate3d(${x}px,0,0)`
        }
      }
    },

    enter: function (el, done) {
      // 触发浏览器重绘
      let rf = el.offsetHeight
      this.$nextTick(() => { // 让动画效果异步执行,提高性能
        el.style.webkitTransform = 'translate3d(0, 0, 0)'// 设置小球掉落后最终的位置
        el.style.transform = 'translate3d(0, 0, 0)'
        let inner = el.getElementsByClassName('inner-hook')[0]
        inner.style.webkitTransform = 'translate3d(0, 0, 0)'
        inner.style.transform = 'translate3d(0, 0, 0)'
        el.addEventListener('transitionend', done) // Vue为了知道过渡的完成，必须设置相应的事件监听器。它可以是transitionend或 animationend
      })
    },

    afterEnter: function (el) {
      // return
      let ball = this.dropBall.shift() // 完成一次动画就删除一个dropBall的小球
      if (ball) {
        ball.show = false
        el.style.display = 'none'
      }
    },

  }
}
</script>

<style lang="scss" scoped>
$--main: #1989fa;
$bg-gradient: linear-gradient(90deg, #fc9153, #f01414);
$goods-price: #FB543B;
.shop-car {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 15px;
  background: #FFFFFF;
  height: 60px;
  z-index: 99;

  .total-price {
    color: $goods-price;
    font-size: 16px;
    font-weight: bold;
  }


  .car-num {
    position: relative;
    padding-right: 20px;

    .num {
      top: 0;
      right: 10px;
      position: absolute;

      .van-tag {
        background: $bg-gradient;
        border-radius: 16px;
        color: #fff;
        display: inline-block;
        font-size: 10px;
        font-weight: 700;
        height: 16px;
        line-height: 16px;
        padding: 0 5px;
        text-align: center;
      }
    }
  }

  .price {
    width: 120px;

    ::v-deep {
      .van-button {
        color: #fff;
        height: 42px;

        &.disabled {
          background: #999999;
          border: 1px solid #999999;
        }
      }
    }
  }
}

.ball-container {
  .ball {
    position: fixed;
    left: 32px;
    bottom: 22px;
    z-index: 900;
    transform: translate3d(0, 0, 0);
    transition: all .6s cubic-bezier(0.49, -0.29, 0.75, 0.41);

    .inner-hook {
      width: 16px;
      height: 16px;
      border-radius: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      color: #FFFFFF;
      background: $--main;
      font-weight: bolder;
      transition: all .6s linear;
      transform: translate3d(0, 0, 0);
    }
  }
}
</style>